<template>
  <span :class="animate ? 'num-animate' : ''" style="display: inline-block">{{ num }}</span>
</template>

<script lang="ts" name="numberAnimate" setup>
  import { ref, watch, onUnmounted } from 'vue';
  const props = defineProps({
    num: {
      type: Number as PropType<Number>,
      default: 0,
    },
    loading: {
      type: Boolean as PropType<Boolean>,
      default: false,
    },
  });
  const timer = ref();
  const animate = ref(false);
  watch(
    () => props.num,
    (newV, oldV) => {
      handleActive();
    },
    {
      immediate: true,
    }
  );
  onUnmounted(() => {
    timer.value && clearTimeout(timer.value);
    timer.value = null;
  });
  function handleActive() {
    if (timer.value) {
      clearTimeout(timer.value);
    }
    animate.value = true;
    timer.value = setTimeout(() => {
      animate.value = false;
    }, 1000);
  }
</script>

<style scoped lang="less">
  .num-animate {
    // transform: rotateX(360deg);
    animation: rotate 1s linear infinite;
    will-change: transform;
    //transition: all 0.8s;
  }
  @keyframes rotate {
    from {
      transform: rotateX(0deg);
    }
    to {
      transform: rotateX(360deg);
    }
  }
</style>
